<template>
  <div class="copyNot">
    <audio
      id="audio"
      preload="auto"
      @error="playAudioError"
      @ended="playAudioEnd"
      @onPlayTimeChange="onPlayTimeChange"
      :curPlayTime="audioPlayTime"
      class="c-pf c-p-l-100"
    ></audio>
    <audio id="audioSelf" @ended="playAudioSelfEnd" class="c-pf c-p-l-100"></audio>
    <div>
      <!-- <countdown ref='startAnimation' v-if="showStart" @hideCountdown="hideCountdown"></countdown> -->
      <div v-show="!showStart" class="c-pb100" v-if="questionInfo!=null">

        <div class="c-ph24 c-flex-row c-aligni-center c-fs24 c-hh100 c-fc-xblack">
          <span>{{num - 1}}/{{wholeNum}}</span>
          <span class="c-flex-grow1 c-pl48 c-w0"></span>
          <span class="iconfont c-pr40 c-fs32" @click="clickPause">&#xe7a7;</span>
          <div @click="clickNextQuestion(3)" class="theme-bg c-fc-white c-br10 c-ww90 c-hh48 c-fs24 c-lh48 c-textAlign-c">交卷</div>
        </div>
        <!-- <div class="time-bg-bar" v-if="enableLimitTime != -1">
          <div class="time-bar" :style="{width: timeProcess + '%'}"></div>
        </div> -->
        <!-- 从练习中抽取题目，有可能练习中该题后面被删除了 -->
        <section v-if="questionInfo.type">
          <div v-show="questionInfo.status!=-1">
            <div v-if="questionInfo.bigType!=9">
              <div class="c-ph24 c-pb60 c-fs28 c-pt28" v-if="questionInfo.type != 9">
                <span class="fl c-lh36">{{num - 1}}.</span>
                <span class="c-fs28 c-lh36 c-fc-xblack copyNot problemdDom" v-html="questionInfo.problem"></span>
              </div>
              <div v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4">
                <div v-for="(item,index) in optionsList" :key="index" class="c-ph24 c-flex-row c-pv20 c-fs28 c-mh90" @click="clickOption(index)">
                  <div class="op-type c-ww50 c-hh50 c-lh50 c-textAlign-c" :class="[optionClass[index],questionInfo.realType != 2?'c-brp50':'']">{{item.type}}</div>
                  <div class="c-pl20 c-lh50 copyNot c-textAlign-j problemdDom" v-html="item.name"></div>
                </div>
              </div>
              <!-- <div v-if="questionInfo.type == 11">
                <div v-for="(item,index) in optionsList" :key="index" class="c-ph24 c-flex-row c-pv20 c-fs28 c-mh90">
                  <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c noChoose">{{item.type}}</div>
                  <div class="c-pl20 c-lh50 c-wb-ba copyNot imgInlineb c-textAlign-j problemdDom" v-html="item.name"></div>
                </div>
              </div> -->
              <div class="c-ph24" v-if="questionInfo.type==3">
                <div class="c-w100 c-br10 c-bd1-mgray c-bg-fa c-ph20 c-pt20">
                  <textarea v-model="essayAnswer" @focus='inputFocus' @blur='inputBlur' name="" id="inputArea" cols="30" rows="10" placeholder="请输入答案" class="needsclick show c-fs24 c-fc-xblack c-lh40 c-w100 c-bg-fa short-answer-textarea"></textarea>
                  <div class="c-pt30 c-flexw-wrap c-flex-row">
                    <div
                      v-for="(item, index) in uploadImgList"
                      :key="index"
                      class="c-ww160 c-hh160 c-mb24 c-flex-row c-flex-center c-p c-br10"
                      :class="index % 3 == 0 ? '' : 'c-ml20'"
                    >
                      <i @click.stop="delUploadImage(index)" class="iconfont c-fs28 del-img">&#xe757;</i>
                      <img
                        @click="clickPreviewImage(item.url)"
                        class="c-ww160 c-hh160"
                        :src="$addXossFilter(item.url)"
                        alt=""
                      />
                    </div>
                    <div class="c-flex-row c-flexw-wrap c-pt30" v-if="uploadAudioList.length > 0">
                      <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in uploadAudioList" :key="index" :class="index % 3 == 0 ? '' : 'c-ml20'" class="c-ww160 c-hh60 c-br30 c-bg-ssmblue c-pl24 c-pr10 c-p c-flex-row c-aligni-center c-mb30">
                        <div class="box c-ww32">
                          <div class="wifi-symbol">
                            <div class="wifi-circle first c-bd2-white"></div>
                            <div class="wifi-circle second c-bd2-white" :class="playAduioSrc == item.url?'seconAnimation':''"></div>
                            <div class="wifi-circle third c-bd2-white" :class="playAduioSrc == item.url?'thirdAnimation':''"></div>
                          </div>
                        </div>
                        <div class="c-fs20 c-fc-white">{{item.time}}"</div>
                        <i @click.stop="clickDelAudio(index)" class="iconfont c-fs28 del-img">&#xe757;</i>
                      </div>
                    </div>
                    <div class="c-p c-mr60 c-pb20">
                      <div @click="clickAnswerPic" class="c-w100">
                        <i class="iconfont c-fs32 c-fc-gray">&#xe75e;</i>
                      </div>
                      <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-w100 c-hh40 c-fs10"
                        v-if="!isWeiXin"
                        :disabled="leftNumFlag?true:false"
                        ref="uploadImg"
                        name="file"
                        type="file"
                        accept="image/*"
                        @change="clickAnswerPic($event)" />
                    </div>
                    <div @click="clickAddAudio" class="c-mr60">
                      <i class="iconfont c-fs32 c-fc-gray">&#xe75b;</i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="c-ph24 c-mt24" v-if="questionInfo.type==5">
                <div class="c-flex-row c-mb40" v-for="(item,index) in fbAnswer" :key="index">
                  <div class="c-fs28 c-fc-xblack c-mr32 c-ww54 c-hhs54 c-br36 c-bd1-mgray c-flex-row c-flex-center c-flex-shrink0">{{index + 1}}</div>
                  <div class="c-flex-grow1 c-mr10 c-bd-b1-mgray"><input type="text" name="" id="" v-model="item.value" class="c-w100 c-fs28 c-fc-xblack c-bd0"></div>
                </div>
              </div>
            </div>
            <div class="" v-else>
              <!-- 视频题 -->
              <div
                class="c-fs28 c-fc-xblack c-ph24 c-pb24"
                v-if="(questionInfo.resourceType == 1||questionInfo.resourceType == 2)&&
                  questionInfo.resourceUrl != ''"
              >
                欣赏下面片段作答 。
              </div>
              <section
                v-show="
                  questionInfo.resourceType == 1 &&
                    questionInfo.resourceUrl != ''
                "
                class="c-hh360 c-ph24 c-p c-pz99"
              >
                <div id="liveVideoIntroParent" class="c-w100-im"></div>
                <div
                  v-show="!playing"
                  class="c-pa  c-p-l0 c-p-t0 c-p-r0 c-h c-flex-row c-aligni-center c-justify-center c-mh24 c-pz100 c-bg-black c-pz100"
                  @click="Videoplay"
                >
                  <span class="iconfont c-fc-white c-fs100">&#xe869;</span>
                </div>
                <div
                  class="c-p-l0 c-pa c-ph16 c-p-t0 c-w100 c-h c-pz100"
                  v-if="questionInfo.assetStatus == -1"
                >
                  <div class="c-br8 c-translucent-balck60 c-w100 c-h">
                    <div class="iconfont c-fc-white c-fs108 c-textAlign-c c-pt100">
                      &#xe963;
                    </div>
                    <div class="c-fs24 c-fc-f2 c-textAlign-c">
                      该视频已被管理员删除，如有疑问请咨询客服
                    </div>
                  </div>
                </div>
              </section>
              <!-- 音频题 -->
              <section
                v-show="questionInfo.resourceType == 2 &&questionInfo.resourceUrl != ''" class="c-ph24">
                <div class="c-bg-xgreen c-flex-row c-aligni-center c-br8 c-ph16 c-p">
                  <div class="c-mr30 c-ww54">
                    <img class="c-w100" src="@/assets/i/wap/exam/voice_icon.png" alt=""/>
                  </div>
                  <div class="c-flex-grow1 c-mr48">
                    <div class="c-fc-white c-fs20 c-mt14 c-mb10 c-maxw440">
                      {{ questionInfo.resourceName }}
                    </div>
                    <vue-slider
                      class="audioPlay"
                      :height="2"
                      :processStyle="processStyle"
                      :railStyle="railStyle"
                      :dotOptions="dotOptions"
                      v-model="audioPlayTime"
                      tooltip="none"
                      :lazy="true"
                      :max="duration"
                      @drag-start="dragStart"
                      @dragging="dragging"
                      @drag-end="dragEnddragEnd"
                      @change="inputChange"
                    >
                      <template slot="dot">
                        <div class="dot-peinner c-ww22 c-hh22 c-brp50">
                          <span class="c-ww22" style="text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"
                          ></span>
                        </div>
                      </template>
                    </vue-slider>
                    <div class="c-flex-row c-aligni-center c-justify-sb c-fs16 c-fc-white c-mt5 c-pb15">
                      <div>{{ playtime }}</div>
                      <div>{{ playtotalTime }}</div>
                    </div>
                  </div>
                  <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white"
                    v-if="showFirstSpeak"
                    @click="firstPlay"
                  >&#xe8ed;</div>
                  <div
                    class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white"
                    v-if="!showLoudspeaker && !showFirstSpeak"
                    @click="replay"
                  >&#xe8ed;</div>
                  <div
                    class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white"
                    v-if="showLoudspeaker && !showFirstSpeak"
                    @click="pause"
                  >&#xe8ef;</div>
                  <div
                    v-if="questionInfo.assetStatus == -1"
                    class="c-flex-row c-aligni-center c-br8 c-ph16 c-pa c-translucent-balck60 c-p-t0 c-pz10 c-p-l0 c-w100 c-h"
                  >
                    <div class="iconfont c-fc-white c-fs40">&#xe963;</div>
                    <div class="c-fs24 c-fc-f2 c-ml16">
                      该音频已被管理员删除，如有疑问请咨询客服
                    </div>
                  </div>
                </div>
              </section>
              <div class="c-ph24 c-pb40 c-fs28 c-pt28">
                <span class="fl c-lh36">{{num - 1}}.</span>
                <span class="c-fs28 c-lh36 c-fc-xblack copyNot problemdDom" @click="clickDesc" v-html="questionInfo.bigProblem"></span>
              </div>
              <div class="c-ph24">
                <div class="c-br8 bd-e6 bg-fa c-pb40">
                  <div class="c-ph24 c-pb32 c-fs28 c-pt28">
                    <div class="c-ws-n c-mb20">{{questionInfo.type==1?'单选题':(questionInfo.type==2?'多选题':(questionInfo.type==3?"问答题":(questionInfo.type==4?"判断题":(questionInfo.type==5?"填空题":""))))}}</div>
                    <span class="c-fs28 c-l40 c-fc-xblack copyNot problemdDom" @click="clickDesc" v-html="questionInfo.problem"></span>
                  </div>
                  <div v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4">
                    <div v-for="(item,index) in optionsList" :key="index" class="c-ph24 c-flex-row c-pv16 c-fs28 c-mh90" @click="clickOption(index)">
                      <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c" :class="[optionClass[index],questionInfo.type != 2?'c-brp50':'']">{{item.type}}</div>
                      <div class="c-pl20 c-lh50 copyNot c-textAlign-j problemdDom" v-html="item.name"></div>
                    </div>
                  </div>
                  <div class="c-ph24" v-if="questionInfo.type==3">
                    <div class="c-w100 c-br10 c-bd1-mgray c-bg-fa c-ph20 c-pt20">
                      <textarea v-model="essayAnswer" @focus='inputFocus' @blur='inputBlur' name="" id="inputArea" cols="30" rows="10" placeholder="请输入答案" class="needsclick show c-fs24 c-fc-xblack c-lh40 c-w100 c-bg-fa short-answer-textarea"></textarea>
                      <div class="c-pt30 c-flexw-wrap c-flex-row">
                        <div
                          v-for="(item, index) in uploadImgList"
                          :key="index"
                          class="c-ww160 c-hh160 c-mb24 c-flex-row c-flex-center c-p c-br10"
                          :class="index % 3 == 0 ? '' : 'c-ml20'"
                        >
                          <i @click.stop="delUploadImage(index)" class="iconfont c-fs28 del-img">&#xe757;</i>
                          <img
                            @click="clickPreviewImage(item.url)"
                            class="c-ww160 c-hh160"
                            :src="$addXossFilter(item.url)"
                            alt=""
                          />
                        </div>
                        <!-- <div v-for="(item,index) in uploadImgList" :key="index" class="c-ww160 c-hh160 c-mb24 c-flex-row c-flex-center c-p c-br10" :class="index % 3 == 0 ? '':'c-ml20'">
                          <div @click="delUploadImage(index)" class="c-fc-white del-img">x</div>
                          <img @click="clickPreviewImage(item.url)" class="c-ww160 c-hh160" :src="$addXossFilter(item.url)" alt="" />
                        </div> -->
                        <div class="c-flex-row c-flexw-wrap c-pt30" v-if="uploadAudioList.length > 0">
                          <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in uploadAudioList" :key="index" :class="index % 3 == 0 ? '' : 'c-ml20'" class="c-ww160 c-hh60 c-br30 c-bg-ssmblue c-pl24 c-pr10 c-p c-flex-row c-aligni-center c-mb30">
                            <div class="box c-ww32">
                              <div class="wifi-symbol">
                                <div class="wifi-circle first c-bd2-white"></div>
                                <div class="wifi-circle second c-bd2-white" :class="playAduioSrc == item.url?'seconAnimation':''"></div>
                                <div class="wifi-circle third c-bd2-white" :class="playAduioSrc == item.url?'thirdAnimation':''"></div>
                              </div>
                            </div>
                            <div class="c-fs20 c-fc-white">{{item.time}}"</div>
                            <i @click.stop="clickDelAudio(index)" class="iconfont c-fs28 c-fc-gray del-img">&#xe757;</i>
                          </div>
                        </div>
                        <div class="c-p c-mr60 c-pb20">
                          <div @click="clickAnswerPic" class="c-w100">
                            <i class="iconfont c-fs32 c-fc-gray">&#xe75e;</i>
                          </div>
                          <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-w100 c-hh40 c-fs10"
                            v-if="!isWeiXin"
                            :disabled="leftNumFlag?true:false"
                            ref="uploadImg"
                            name="file"
                            type="file"
                            accept="image/*"
                            @change="clickAnswerPic($event)" />
                        </div>
                        <div @click="clickAddAudio" class="c-mr60">
                          <i class="iconfont c-fs32 c-fc-gray">&#xe75b;</i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="c-ph24 c-mt24" v-if="questionInfo.type==5">
                    <div class="c-flex-row c-mb40" v-for="(item,index) in fbAnswer" :key="index">
                      <div class="c-fs28 c-fc-xblack c-mr32 c-ww54 c-hh54 c-br36 c-bd1-mgray c-flex-row c-flex-center c-flex-shrink0">{{index + 1}}</div>
                      <div class="c-flex-grow1 c-mr10 c-bd-b1-mgray"><input type="text" name="" id="" v-model="item.value" class="c-w100 c-fs28 c-fc-xblack c-bd0 bg-fa"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-show="questionInfo.status==-1">
            <loading-status-tem :showLoading="false" :noData="questionInfo.status==-1" :noDataText="'该题目已被删除,请联系管理员'"></loading-status-tem>
          </div>
        </section>
      </div>

      <div v-show="isPause" class="c-h c-pf c-pz99 c-p-t0 c-p-l0 c-w100 c-bg-f3 c-flex-column c-aligni-cente c-justify-center">
        <div class="c-fc-smblue c-fs48 c-textAlign-c">休息中...</div>
        <div class="btn-pause" @click="clickGoOn">继续做题</div>
        <div class="btn-pause" @click="clickRestart">重新开始</div>
        <div class="btn-pause" @click="clickExit">退出测试</div>
      </div>
      <div class="btn-wrap c-flex-row c-justify-sb" v-show="questionInfo!=null && (questionInfo.type!=9 || (questionInfo.type==9 && isOver==1))">
        <div v-show="!showStart" class="btn-next-question c-flex-grow1" v-if='isOver==0' @click="clickNextQuestion(1)">下一题</div>
        <div v-show="!showStart" class="btn-next-question c-flex-grow1" v-if='isOver==1' @click="clickNextQuestion(2)">提交</div>
      </div>
    </div>
    <clock-audio-record :showAudioRecordModal='showAudioRecordModal' @closeAudioRecordModal='closeAudioRecordModal' @uploadAudioSuccess='uploadAudioSuccess'></clock-audio-record>
    <cj-popup v-model="showSelectModal" :closeable="true" titleClass="c-bd-b1" :title="'第'+(selectIndex*1+1)+'空'" position="bottom" round v-if="questionInfo&&questionInfo.newOption">
      <div v-for="(item,index) in questionInfo.newOption[selectIndex].options" :key="index" @click.stop="clickOption(index)" class="c-ph24 c-flex-row c-pv20 c-fs24 c-mh90">
        <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c" :class="optionClass[index]" >{{item.name}}</div>
        <div class="c-pl20 c-lh50 c-wb-ba copyNot imgInlineb c-textAlign-j problemdDom" v-html="item.content"></div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js"
import VueSlider from "vue-slider-component";
import clockAudioRecord from "@/components/templates/clockIn/clockAudioRecord.vue";
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
import "vue-slider-component/theme/antd.css";
let inputScrollTop = 0;
let serverIdImgArr = []; //上传图片的serverID
let imgData = {};
let player = null;
let isCanPlay = false
let playTimeControl = null;
export default {
  name: "ExaminationWrongAnswer",
  components: {
    loadingStatusTem,
    VueSlider,
    clockAudioRecord
  },
  props: [],
  data() {
    return {
      wHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      examinationInfo: null,
      testRes: null,
      answerCardList: [],
      review: '',
      hasCommit: false,
      isOver: 0,
      paperMainId: -1,
      paperDetailId: -1,
      topicId: -1,
      examId: -1,
      num: 1,
      showStart: true,
      isPause: false,
      questionInfo: null,
      optionsList: [],
      answerList: [false, false, false, false, false, false, false, false, false, false],
      timeProcess: 100,
      limitTime: 10,
      enableLimitTime: 0, //做题时是否限制时间 -1 不限制 1限制每道题 2限制总时间
      examModel: -1, //1考试模式 2练习模式
      everyTime: 0, //限制每道题的时间(单位秒)
      totalTime: 0, //做题限制的总时间（单位秒）
      optionClass: [],
      essayAnswer: "", //问答题用户回答的内容
      fbAnswer: null, //填空题用户回答的内容
      uploadImgList: [], //需要上传的图片
      ttId: '', //营期ID
      tpId: '', //环节ID
      tlId: '', //课时ID
      smallNumber: 1,
      examMainId: 0,
      wholeNum: 0,
      collectId: 0,
      isWeiXin: true,
      paperId:'',
      audioPlayTime: 0,
      playtime: '00:00:00',
      playtotalTime: '00:00:00',
      duration: 0,
      showFirstSpeak: true,
       showLoudspeaker: false,
       dragFlag: false, //进度拖拽
      playing: false,
      processStyle: {
        "background-color": "#fff"
      },
      railStyle: {
        "background": "rgba(255,255,255,0.3)"
      },
      dotOptions: {
        style: {
          border: "1px solid #fff",
        },
      }, //进度条组件样式
      playAduioSrc:'',
      showAudioRecordModal:false,
      uploadAudioList:[],
      selectIndex:0, // 获取其属性
      showSelectModal:false
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("答题");// eslint-disable-line
    this.isWeiXin = utilJs.isWeiXin();
    this.timeProcess = 100;
    this.hasCommit = false;

    this.showStart = true;
    this.paperMainId = this.$route.query.paperMainId;
    this.topicId = this.$route.query.topicId;
    this.examMainId = this.$route.query.examMainId;
    this.wholeNum = 0;
    this.num = Number(this.$route.query.goOnNum);
    this.smallNumber = 1;
    this.tpId = this.$route.query.tpId || ''; //环节id
    this.ttId = this.$route.query.ttId || '';
    this.tlId = this.$route.query.tlId || '';
    this.ckFrom = this.$route.query.ckFrom || '';
    this.paperId = this.$route.query.paperId || '';
    this.testRes = null;
    this.audioPlayTime = 0
    this.answerCardList = [];
    this.uploadAudioList = []
    this.playAduioSrc = ''
    this.showFirstSpeak = true;
    this.answerList = [false, false, false, false, false, false, false, false, false, false];
    this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
    this.essayAnswer = "";

    // if (this.num != 1) {
      this.showStart = false;
      this.getQuestion();
    // }
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
        imgData = res;
      });
    }
    this.wechatShare();
  },
  deactivated() {
  },
  mounted() {
  },
  methods: {
    // 删除音频
    clickDelAudio(index) {
      if (document.getElementById("audioSelf")) {
        this.playAduioSrc = "";
        document.getElementById("audioSelf").src = this.playAduioSrc;
        document.getElementById("audioSelf").pause();
      }
      this.uploadAudioList.splice(index, 1);
    },
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audioSelf");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audioSelf").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      if (this.playAduioSrc && this.playAduioSrc.includes("http")) {
        document.getElementById("audioSelf").src = this.playAduioSrc;
        audio.play();
      }
    },

    //监听音频播放结束执行的内容
    playAudioSelfEnd() {
      this.playAduioSrc = "";
      document.getElementById("audioSelf").src = this.playAduioSrc;
    },
    clickAddAudio() {
      this.playAduioSrc = "";
      document.getElementById("audioSelf").src = this.playAduioSrc;
      if (utilJs.getAppVersion() > 0) {
        this.initAppRecordEvent();
        utilJs.sendDataToAppNew('record', 'appAudioStartRecord');
        return;
      }
      this.showAudioRecordModal = true;
    },
    //关闭录音弹窗
    closeAudioRecordModal(state) {
      if (state == 1) {
        this.showAudioRecordModal = false;
      }
    },
    //音频上传成功
    uploadAudioSuccess(audioContent, state) {
      if (state == 1) {
        this.showAudioRecordModal = false;
      }
      let audioItem = {
        url: audioContent.content,
        time: audioContent.time
      };
      this.uploadAudioList.push(audioItem);
      console.log(audioItem, 444444444444)
    },
    initAppRecordEvent() {
      window['cjAppAudioRecordResult'] = this.appRecordResult;
    },
    //app录音结果回调
    appRecordResult(resKey, time) {
      console.log('*******appRecordResult***', resKey, time)
      let resUrl = `https://qnoss.ckjr001.com/${resKey}`;
      let info = {
        content: resUrl,
        time:time
      }
      this.uploadAudioSuccess(info);
    },
    //
    audioTimeUpdate() {
      // //如果正在拖动  还不能播放，则不更新时间
      if (this.dragFlag && !isCanPlay) {
        return;
      }
      playTimeControl = setTimeout(() => {
        if (document.getElementById('audio') && Math.floor(document.getElementById('audio').currentTime) > 0) {
          this.audioPlayTime = Math.floor(document.getElementById('audio').currentTime);
          this.playtime = this.timeToStr(this.audioPlayTime)
        }
      }, 200)
      console.log("audioTimeUpdate-----------");
    },
     //开始播放音频
    audioCanPlay(e) {
      isCanPlay = true;
      this.duration = Math.floor(e.target.duration);
      this.duration = Math.floor(document.getElementById('audio').duration)
      this.playtotalTime = this.timeToStr(this.duration)
      console.log("audioCanPlay-----------");
    },
    dragStart() {
      this.dragFlag = true;
    },
    inputChange(value) {
      console.log("inputChange-----------");
      if (this.dragFlag) {
        this.dragFlag = false;
        return;
      }
      document.getElementById('audio').currentTime = this.audioPlayTime;
    },
    dragging() {
      this.dragFlag = true;
      clearInterval(playTimeControl);
      console.log("dragging------");
    },
    //拖动结束，更改播放器当前时间，重新开始循环获取当前时间
    dragEnddragEnd() {
      document.getElementById('audio').currentTime = this.audioPlayTime;
      this.dragFlag = false;
      console.log("dragEnd-----------");
    },
    firstPlay() {
      this.showFirstSpeak = false;
      this.showLoudspeaker = true;
      this.playRadio();
    },
    replay() {
      this.audioPlayTime = 0
      document.getElementById('audio').currentTime = this.audioPlayTime;
      this.showLoudspeaker = true;
      this.playRadio();
    },
    pause() {
      this.showFirstSpeak = true
      document.getElementById("audio").pause();
    },
    playRadio() {
      let audio = document.getElementById("audio");
      if (this.questionInfo.resourceType == 2 && this.questionInfo.resourceUrl != '') {
        if (this.isWeiXin) {
          try {
            document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  document.getElementById("audio").play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                document.getElementById("audio").play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
          } catch (error) {
            // continue regardless of error
          }
        } else {
          audio.load();
          audio.play();
        }
      }
    },
    playAudioEnd() {
      this.showLoudspeaker = false;
    },
    onPlayTimeChange(playTime, allTime) {
      this.audioPlayTime = playTime;
    },
    playAudioError() {},
    initQPlayer() {
      let videoObj = {
        videoMp4: this.questionInfo.resourceUrl,
        videoM3U8: this.questionInfo.resourceUrl,
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../../public/i/wap/index/poster.png")
      };
      player = getXgplayer("liveVideoIntroParent", videoObj);
      player.on('ready', () => {
        console.log('ready')
        document.querySelector(".xgplayer-start").style.zIndex = 99;
      })
      player.on("play", () => {
      });
      if (document.querySelector(".xgplayer-start")) {
        console.log('ready')
        document.querySelector(".xgplayer-start").style.zIndex = '99';
      }
    },
    Videoplay() {
      if (this.questionInfo.resourceUrl) {
        player.play()
        this.playing = true
      }
    },
    //点击回答图片
    clickAnswerPic(event) {
      if (this.uploadImgList.length >= 9) {
        this.$showCjToast({
          text: "图片最多只能传9张",
          type: "warn",
          time: 1500
        });
        return;
      };
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: 9, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 9 - this.uploadImgList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        });
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'exam', res => {
          let urlObj = {
            url: res
          };
          this.uploadImgList.push(urlObj)
        }, fRes => {});
      }
    },

    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage({
          localId: localIds[localIdsLength]
        }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },

    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(global.apiurl + "signCard/downWxImg ", {
        serverId: JSON.stringify(serverIdArr),
        mediaType: 2
      },
        res => {
          this.$loading.hide();
          for (let key of res) {
            if (this.uploadImgList.length >= 9) {
              break;
            }
            let urlObj = {
              url: key
            };
            this.uploadImgList.push(urlObj)
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    //删除上传的图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
    },

    //点击图片放大预览
    clickPreviewImage(imgUrl) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of this.uploadImgList) {
        imgArr.push(key.url);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    clickDesc(e) {
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src] // 需要预览的图片http链接列表
        });
      }
    },
    clickOption(index) {
      if (this.questionInfo.type == 11 || this.questionInfo.type == 1 || this.questionInfo.type == 4 || ((this.questionInfo.type == 9) && (this.questionInfo.realType == 1 || this.questionInfo.realType == 4))) {
        this.answerList = [false, false, false, false, false, false, false, false, false, false];
        this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
        this.$set(this.answerList, index, true);
        this.$set(this.optionClass, index, 'choose');
         if (this.questionInfo.type == 11) {
            let lettersT = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
            let btn = document.getElementsByClassName('selectClass')
            btn[this.selectIndex].innerHTML = lettersT[index]
            this.showSelectModal = false
          }
      } else if (this.questionInfo.type == 2 || (this.questionInfo.type == 9 && this.questionInfo.realType == 2)) {
        this.$set(this.answerList, index, !this.answerList[index]);
        if (this.optionClass[index] == 'choose') {
          this.$set(this.optionClass, index, 'noChoose');
        } else if (this.optionClass[index] == 'noChoose') {
          this.$set(this.optionClass, index, 'choose');
        }
      }
    },
    hideCountdown() {
      if (this.showStart == true) {
        this.showStart = false;
        this.getQuestion();
      }
    },
    timeToStr(timeSecond) {
      //将秒转化为00:00:00格式
      let hour =
        Math.floor(timeSecond / 3600) >= 10
          ? Math.floor(timeSecond / 3600)
          : "0" + Math.floor(timeSecond / 3600);
      let minute =
        Math.floor((timeSecond % 3600) / 60) >= 10
          ? Math.floor((timeSecond % 3600) / 60)
          : "0" + Math.floor((timeSecond % 3600) / 60);
      let second =
        Math.floor(timeSecond % 60) >= 10
          ? Math.floor(timeSecond % 60)
          : "0" + Math.floor(timeSecond % 60);
      return hour + ":" + minute + ":" + second;
    },
    clickPause() {
      //点击暂停
      this.isPause = true;
    },
    transAnswerText() {
      var answerText = '';
      let lettersT = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
      if (this.questionInfo.type == 1 || this.questionInfo.type == 2 || (this.questionInfo.type == 9 && (this.questionInfo.realType == 1 || this.questionInfo.realType == 2))) {
        for (let i = 0; i < this.optionsList.length; i++) {
          if (this.answerList[i] == true) {
            answerText = answerText + lettersT[i];
          }
        }
      } else if (this.questionInfo.type == 4 || (this.questionInfo.type == 9 && this.questionInfo.realType == 4)) {
        if (this.answerList[0] == true) {
          answerText = "正确";
        } else if (this.answerList[1] == true) {
          answerText = "错误";
        }
      } else if (this.questionInfo.type == 3 || (this.questionInfo.type == 9 && this.questionInfo.realType == 3)) {
        answerText = this.essayAnswer;
      } else if (this.questionInfo.type == 5 || (this.questionInfo.type == 9 && this.questionInfo.realType == 5)) {
        answerText = this.fbAnswer;
      } else if (this.questionInfo.type == 11) {
        var myselect = document.getElementsByClassName("selectClass")
        var index = []
        for (let i = 0;i < myselect.length;i++) {
          let option = {value: myselect[i].innerHTML == (i * 1 + 1) + '. 点击答题' ? '' : myselect[i].innerHTML, key: i, }
          index.push( option);
        }
        answerText = index
      }
      return answerText
    },
    clickNextQuestion(type) {
      let answerText = '';
      let $this = this;
      answerText = this.transAnswerText();
      // let fbComplete = false;
      // if (this.questionInfo.status != -1 && this.questionInfo.type && (this.questionInfo.type == 5 || (this.questionInfo.type == 9 && this.questionInfo.realType == 5))) {
      //   $this.fbAnswer.forEach(item => {
      //     if (item.value.trim() == "") {
      //       fbComplete = true;
      //     }
      //   })
      // }
      // if (this.questionInfo.status != -1 &&
      //   ((this.questionInfo.type != 9 && ((this.questionInfo.type != 5 && this.questionInfo.type != 3 && answerText.trim() == "") || (this.questionInfo.type == 3 && answerText.trim() == "" && this.uploadImgList.length == 0) || (this.questionInfo.type == 5 && fbComplete))) ||
      //     (this.questionInfo.type == 9 && ((this.questionInfo.realType != 5 && this.questionInfo.realType != 3 && answerText.trim() == "") || (this.questionInfo.realType == 3 && answerText.trim() == "" && this.uploadImgList.length == 0) || (this.questionInfo.realType == 5 && fbComplete)))) &&
      //   this.questionInfo.type
      // ) {
      //   this.$showCjToast({
      //     text: (this.questionInfo.type == 3 || this.questionInfo.type == 5 || (this.questionInfo.type == 9 && (this.questionInfo.realType == 3 || this.questionInfo.realType == 5))) ? "请填写答案" : "请选择答案",
      //     position: "middle",
      //     type: "warn"
      //   });
      // } else {
        let answerCommit = {
          examMainId: $this.examMainId,
          paperDetailId: $this.paperDetailId,
          options: answerText,
          examId: $this.examId,
          examOver: $this.isOver,
          topicId: $this.topicId,
          collectId: $this.collectId
        };
        if ((this.questionInfo.type == 3 || (this.questionInfo.type == 9 && this.questionInfo.realType == 3)) && this.uploadImgList.length > 0) {
          answerCommit.imgArr = this.uploadImgList;
        }
        if (($this.questionInfo.type == 3 || $this.questionInfo.smallType == 3 || ($this.questionInfo.type == 9 && $this.questionInfo.smallType == 3)) && $this.uploadAudioList.length > 0) {
          answerCommit.audioArr = $this.uploadAudioList;
        }
        if (this.questionInfo.type == 4 || (this.questionInfo.type == 9 && this.questionInfo.realType == 4)) {
          if (answerCommit.options == '正确') {
            answerCommit.options = 1;
          } else if (answerCommit.options == '错误') {
            answerCommit.options = -1;
          }
        }
        if (this.questionInfo.type == 5 || (this.questionInfo.type == 9 && this.questionInfo.realType == 5)) {
          answerCommit.options = this.fbAnswer;
        }
        if (type == 3) {
          answerCommit.examOver = 1;
        }

        if (this.hasCommit == false) {
          this.hasCommit = true;
          utilJs.postMethod(global.apiurl + 'exam/saveCollectionAnswer', answerCommit, function (res) {
            if (type == 1) {
              //防止页面手动刷新后又从第一题开始作答
              $this.$routerGo($this, "replace", {
                path: "/member/myWrongTopic/examWrongTopic/examinationWrongAnswer",
                query: {
                  // questionNum: $this.wholeNum,
                  examMainId: $this.examMainId,
                  topicId: $this.topicId,
                  goOnNum: $this.num,
                  paperId:$this.paperId
                }
              });
              $this.getQuestion();
            } else { //最后一题或者提前交卷
              $this.$routerGo($this, "replace", {
                path: "/member/myWrongTopic/examWrongTopic/examinationWrongResult",
                query: { examMainId: $this.examMainId, topicId: $this.topicId, paperId:$this.paperId }
              });
            }
          },
            failRes => {
              $this.hasCommit = false;
            }

          );
        }
      // }
    },
    getQuestion() {
      this.answerList = [false, false, false, false, false, false, false, false, false, false];
      this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
      this.optionsList = [];
      this.questionInfo = null;
      this.fbAnswer = null;
      this.uploadImgList = [];
      this.uploadAudioList = [];
      this.playAduioSrc = ''
      this.essayAnswer = "";
      let $this = this;
      this.$loading.show({
        text: ""
      });
      let questionUrl = '';
      this.showFirstSpeak = true;
      this.showLoudspeaker = false;
      this.audioPlayTime = 0;
      this.ancyaudioPlayTime = 0;
      this.playtime = '00:00:00';
      this.playtotalTime = '00:00:00';
      this.duration = 0;
      this.playing = false
      clearInterval(playTimeControl);
      questionUrl = global.apiurl + 'exam/CollectionProcess/' + this.examMainId;
      utilJs.getMethod(questionUrl, function (res) {
        $this.$loading.hide();
        $this.hasCommit = false;
        $this.questionInfo = res;
        $this.paperDetailId = res.paperDetailId;
        $this.collectId = res.collectId;
        $this.wholeNum = res.totalNum
        $this.uploadAudioList = res.audioArr
        if (player) {
          destoryPlayer(player);
          player = null;
          // document.querySelector("#liveVideoIntroParent").innerHTML = "";
        }
        if ($this.questionInfo.status == 1 && $this.questionInfo.resourceUrl != '' && $this.questionInfo.resourceType == 1) {
          $this.$nextTick(function () {
            $this.initQPlayer();
          })
        }
        let audio = document.getElementById("audio");
        audio.src = '';
        if ($this.questionInfo.resourceUrl != '' && $this.questionInfo.resourceType == 2) {
          // $this.$nextTick(function () {
          audio.src = $this.questionInfo.resourceUrl;
          document.getElementById('audio').removeEventListener('timeupdate', $this.audioTimeUpdate);
          document.getElementById('audio').removeEventListener('canplay', $this.audioCanPlay);
          document.getElementById('audio').addEventListener('timeupdate', $this.audioTimeUpdate);
          document.getElementById('audio').addEventListener('canplay', $this.audioCanPlay);
          // })
        }
        if ($this.questionInfo.type == 4 || ($this.questionInfo.type == 9 && $this.questionInfo.realType == 4)) {
          $this.questionInfo.optionA = "正确";
          $this.questionInfo.optionB = "错误";
        }
        if ($this.questionInfo.type == 1 || $this.questionInfo.type == 2 || $this.questionInfo.type == 11 || $this.questionInfo.type == 4 || ($this.questionInfo.type == 9 && ($this.questionInfo.realType == 1 || $this.questionInfo.realType == 2 || $this.questionInfo.realType == 4))) {
          const optionArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
          for (let i = 0; i < 10; i++) {
            let optionSty = `option${optionArr[i]}`;
            if ($this.questionInfo[optionSty] != '' && $this.questionInfo[optionSty] != null) {
              $this.optionsList.push({ type: optionArr[i], name: $this.questionInfo[optionSty] });
            }
          }
        }
        if ($this.questionInfo.type == 5 || ($this.questionInfo.type == 9 && $this.questionInfo.realType == 5)) { //填空题
          let _obj = JSON.stringify($this.questionInfo.answer); //深拷贝出来处理，不影响原数据
          $this.fbAnswer = JSON.parse(_obj);
          $this.fbAnswer.forEach(item => {
            item.value = "";
          })
        }
        if ($this.questionInfo.type == 11) {
          let str = $this.questionInfo.problem;
          // match 方法返回匹配的数组
          let res = str.match(/\{\{[\d}]*?\}\}/g);
          let count = !res ? 0 : res.length;
          for (let i = 0; i < count; i++) {
            $this.questionInfo.problem = $this.questionInfo.problem.replace(/\{\{[\d}]*?\}\}/, function() {
              // let match = "<span class='c-ww60 c-inlineblack selectClass' onclick='alert(111)'></span>"
              const newOption = $this.questionInfo.newOption[i]
              let addSpane = true
              let match = '<span name=' + count + ' class="c-inlineblack c-lh36 c-mh10 c-minw140 c-bd0 c-br0 c-fc-mblue c-textAlign-c c-ph10 c-p c-bg-white" style="text-align-last: center;font-size: 0.6rem;border-bottom:1px solid">'
                for (let j = 0; j < newOption.options.length; j++) {
                  if (newOption != '' && newOption != null) {
                    if ($this.questionInfo.userAnswer && $this.questionInfo.userAnswer[i] && $this.questionInfo.userAnswer[i].value == newOption.options[j].name) {
                      match += "<span class='c-textAlign-c selectClass c-inlineblack c-w100' value=" + i + ">" + newOption.options[j].name + "</span>"
                        addSpane = false
                        break
                      } else {
                        addSpane = true
                      }
                  }
                }
                if (addSpane) {
                    match += "<span class='c-textAlign-c selectClass c-inlineblack c-w100'  value=" + i + ">" + (i + 1) + ". 点击答题</span>"
                }
              match += '</span>'
              return match
            })
            $this.$nextTick(function () {
                $this.bineSelect();
              })
            $this.clickShow = true
          }
        }
        if ($this.questionInfo.type == 9) {
          $this.isOver = (($this.num == res.wholeNum) && (res.hasSmallNum == res.smallNumber)) ? 1 : 0;
          if (parseInt($this.smallNumber) == parseInt(res.hasSmallNum)) {
            $this.num = $this.num < res.wholeNum ? parseInt($this.num) + 1 : $this.num;
          }
          $this.smallNumber = $this.smallNumber < res.hasSmallNum ? parseInt($this.smallNumber) + 1 : 1;
        } else {
          $this.isOver = $this.num < $this.wholeNum ? 0 : 1;
          $this.num = parseInt($this.num) + 1;//$this.num < $this.wholeNum ? parseInt($this.num) + 1 : $this.num;
          $this.smallNumber = 1;
        }
      });
    },
    bineSelect() {
      let btn = document.getElementsByClassName('selectClass')
      Array.from(btn).forEach(element => {
        element.addEventListener('click', this.getSelect);
      });
    },
    getSelect(event) {
      var currentTarget = event.currentTarget; // 指向添加监听器的元素
      this.selectIndex = currentTarget.getAttribute('value'); // 获取其属性
      this.answerList = [false, false, false, false, false, false, false, false, false, false];
      this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
      if (this.userAnswer) {
        if (this.userAnswer[this.selectIndex].value == 'A') {
          this.answerList[0] = true;
          this.optionClass[0] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'B') {
          this.answerList[1] = true;
          this.optionClass[1] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'C') {
          this.answerList[2] = true;
          this.optionClass[2] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'D') {
          this.answerList[3] = true;
          this.optionClass[3] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'E') {
          this.answerList[4] = true;
          this.optionClass[4] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'F') {
          this.answerList[5] = true;
          this.optionClass[5] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'G') {
          this.answerList[6] = true;
          this.optionClass[6] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'H') {
          this.answerList[7] = true;
          this.optionClass[7] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'I') {
          this.answerList[8] = true;
          this.optionClass[8] = 'choose';
        }
        if (this.userAnswer[this.selectIndex].value == 'J') {
          this.answerList[9] = true;
          this.optionClass[9] = 'choose';
        }
      }
      this.showSelectModal = true
    },
    clickGoOn() {
      //点击继续
      this.isPause = false;
      // this.aswerTimeControl();
      if (this.enableLimitTime != -1) {
        this.aswerTimeCountDown();
      }
    },
    clickRestart() {
      //点击重新开始
      this.isPause = false;
      this.isOver = 0;
      this.num = 1;
      this.questionInfo = null;
      this.showStart = true;
      this.essayAnswer = "";
      this.fbAnswer = null;
      this.uploadImgList = [];
      let $this = this;
      utilJs.postMethod(global.apiurl + "exam/joinCollectionExam", {
          ckFrom: this.topicId ? 1 : 2,
          prodId: this.topicId ? this.topicId : this.paperId
      },
      res => {
        $this.examMainId = res.examMainId;
      })
    },
    clickExit() {
      //点击退出测试
      this.isPause = false;
      this.$router.go(-1);
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  beforeRouteLeave(to, from, next) {
    if (player) {
      destoryPlayer(player);
      player = null;
      // document.querySelector("#liveVideoIntroParent").innerHTML = "";
    }
    next();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.btn-wrap {
  width: 100%;
  max-width: 640px;
  border-top: 1px solid #ddd;
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 11;
}
.btn-next-question {
  font-size: 0.7rem;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
}
.btn-pause {
  font-size: 0.8rem;
  width: 7.5rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 1rem;
  border: 1px solid #999;
  background-color: #fff;
  margin: 1.65rem auto 0 auto;
}
.op-type {
  flex-shrink: 0;
}
.c-mh90 {
  min-height: 2.25rem;
}
.time-bg-bar {
  height: 2px;
  position: relative;
  background: #01a1e4;
}
.time-bar {
  height: 2px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e2e2e2;
}
.noChoose {
  background-color: #ededed;
}
.choose {
  color: #fff;
  background-color: #1ba3e4;
}
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
}
textarea {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  appearance: none;
  -webkit-appearance: none;
}
.c-ww54 {
  width: 1.35rem;
}
.short-answer-textarea {
  height: 5.75rem;
  outline: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  resize: none;
}
.del-img {
  position: absolute;
  top: -0.4rem;
  right: -0.2rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: #3d3d3d;
}
.orange-opa {
  color: rgba(255, 120, 0, 0.6);
}
.bd-e6 {
  border: 1px solid #e6e6e6;
}
.bg-fa {
  background-color: #fafafa;
}
.bd-xblue {
  border: 1px solid #2194ff;
}
.dot-peinner {
  position: relative;
  background: rgba(255, 255, 255, 1);
}
.audioPlay /deep/ .vue-slider-dot {
  width: auto !important;
  height: auto !important;
}
#liveVideoIntroParent {
  width: 100% !important;
}
.c-whiteOpcity03 {
  background: rgba(255, 255, 255, 0.3);
}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
</style>

